<template>
    <div class="gp_main_panel">
        <div class="app-header">
            <a-col :span="7">
                <img class="logo-Image" src="./assets/logo.png" />
                <div class="logo-title">星载光学定标预处理v{{`${$store?.state?.version}${$store?.state?.os=="Linux"?"(Linux)":""}` }}</div>
            </a-col>
            <!-- <a-col :span="1"></a-col> -->
            <a-col :span="10">
                <div>
                    <a-menu v-model="current" mode="horizontal" @click="menu_select">
                        <a-menu-item :key="item.key" v-for="item in menus.main">
                            <tool-outlined  v-show="item.icon == 'a-icon'" />
                            <i class="anticon" v-show="item.icon == 'svg'" v-html="item.svg"></i>
                            {{ item.name }}
                        </a-menu-item>
                    </a-menu>
                </div>
            </a-col>
            <a-col :span="4"></a-col>
            <a-col :span="3">
                <span class="net-status">网络状态:<a-badge :status="$store?.state?.net" style="margin-left: 5px;"/></span>
                <a-popover overlayClassName="usr-popover">
                    <template #content >
                        <div class="list-operation usr-popover-list">
                            <a class="" :key="index" v-for="(item, index) in menus?.user" @click="task_manager(item?.key)">{{ item.name }}</a>
                        </div>
                    </template>
                    <div class="_login_user">
                        <user-outlined  class="user-icon"/>
                        <p class="_login-user-name">任务管理</p>
                    </div>
                </a-popover>
            </a-col>
        </div>
        <div class="app-content">
            <router-view></router-view>
        </div>
    </div>
    <a-drawer title="选择项目" 
    placement="right" 
    width="20%" 
    :closable="true" 
    :visible="show_task_drawer_visible"
    :maskClosable="false"
    :bodyStyle="{ padding: '0px' }"
    :maskStyle="{ display: 'none' }"
    :mask="false"
    @close="show_task_drawer_close" 
    class="my-drawer">
    <a-form :model="form_modal" name="basic" :label-col="{ span: 8}" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item label="工程名称">
            <a-select 
            v-model:value="task_select_name" 
            style="width: 150px;" 
            :options="task_selects"
            dropdownClassName="smale-select-span"
            size="small" 
            :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
        </a-form-item>
    </a-form>
    </a-drawer>
</template>
<script>
import { notification } from 'ant-design-vue';
export default {
    data() {
        return {
            current: ['function'],
            menus: {
                main: [
                    {
                        key: 'parameter',
                        name: '参数准备',
                        icon: 'svg',
                        svg:`<svg focusable="false" class="" data-icon="tool" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M876.6 239.5c-.5-.9-1.2-1.8-2-2.5-5-5-13.1-5-18.1 0L684.2 409.3l-67.9-67.9L788.7 169c.8-.8 1.4-1.6 2-2.5 3.6-6.1 1.6-13.9-4.5-17.5-98.2-58-226.8-44.7-311.3 39.7-67 67-89.2 162-66.5 247.4l-293 293c-3 3-2.8 7.9.3 11l169.7 169.7c3.1 3.1 8.1 3.3 11 .3l292.9-292.9c85.5 22.8 180.5.7 247.6-66.4 84.4-84.5 97.7-213.1 39.7-311.3zM786 499.8c-58.1 58.1-145.3 69.3-214.6 33.6l-8.8 8.8-.1-.1-274 274.1-79.2-79.2 230.1-230.1s0 .1.1.1l52.8-52.8c-35.7-69.3-24.5-156.5 33.6-214.6a184.2 184.2 0 01144-53.5L537 318.9a32.05 32.05 0 000 45.3l124.5 124.5a32.05 32.05 0 0045.3 0l132.8-132.8c3.7 51.8-14.4 104.8-53.6 143.9z"></path></svg>`,
                        route: '/parameter',
                    },
                    
                    {
                        key: 'data',
                        name: '数据准备',
                        icon: 'svg',
                        svg: `<svg focusable="false" class="" data-icon="database" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208zM304 240a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0zm0 272a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg>`,
                        route: '/data',
                    },
                    {
                        key: 'calibration',
                        name: '匹配定标',
                        icon: 'svg',
                        svg: `<svg focusable="false" class="" data-icon="border-inner" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 476H548V144h-72v332H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h324v332h72V548h324c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-664h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM650 216h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 592h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-56-592h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-166 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 592h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-56-426h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm56 260h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"></path></svg>`,
                        route: '/calibration',
                    },
                    // {
                    //     key: 'sensor',
                    //     name: '传感器校正',
                    //     icon: 'svg',
                    //     svg: `<svg focusable="false" class="" data-icon="ungroup" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M736 550H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16h448c8.8 0 16-7.2 16-16V566c0-8.8-7.2-16-16-16zm-56 136H344v-64h336v64zm208 130c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zM736 266H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16h448c8.8 0 16-7.2 16-16V282c0-8.8-7.2-16-16-16zm-56 136H344v-64h336v64zm208-194c39.8 0 72-32.2 72-72s-32.2-72-72-72-72 32.2-72 72 32.2 72 72 72zm0-96c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zM136 64c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0 656c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24z"></path></svg>`,
                    //     route: '/sensor',
                    // },
                ],
                user: [
                    {
                        key: 'task_open',
                        name: '打开任务',
                        route: '/system/license',
                    },
                    {
                        key: 'task_close',
                        name: '关闭任务',
                        route: '',
                    },
                ],
            },
            form_modal:{},
            show_task_drawer_visible:false,
            task_select_name:"",
            task_selects:[],
        };
    },
    components: {},
    mounted() {
        let loading = document.getElementById('Loading')
        if (loading != null) {
            document.body.removeChild(loading);
        }
        setTimeout(() => {
            this.get_address()
        }, 300);
        this.$message.config({
            duration: 0.5,
        });
    },
    methods: {
        menu_select(item, key, selectedKeys) {
            this.$router.push({
                name: item.key
            })
        },
        async get_address() {
            let address=await this.$apis.get_address()
            let true_address=undefined
            let true_address_result=undefined
            for (let i = 0; i < address?.length; i++) {
                let result=await this.$apis.get_ping(address[i],{
                    f:"json"
                })
                if(result?.result==true){
                    true_address= address[i]
                    true_address_result=result
                    break;
                }
            }
            if(true_address){
                this.$store.state.true_address = true_address
                this.$store.state.os = true_address_result?.os
                this.$store.state.version = true_address_result?.version
                this.$store.state.task_dir = true_address_result?.task_dir
                this.get_sys_config();
                this.connect_ws(this.$store.state.true_address)
            }
        },
        connect_ws(true_address){
            global["vapp"].config.globalProperties.$socket = new this.$SocketClass(true_address)
            this.$socket.on('connect', (aa) => {
                this.$store.state.net= "success"
                this.$socket.emit("set_node_type", "web")
            })
            this.$socket.on('disconnect', (aa) => {
                this.$store.state.net = "error"
            })
            this.$socket.on('web_exe_status', (data) => {
                this.$mitt.iemit('web_exe_status', data,this?.$?.uid);
            })
        },
        async get_sys_config(){
            let sys_config_all=Promise.all([
                this.$apis.get_set(), 
            ])
            sys_config_all.then((result) => {
                this.$store.state.sets= result[0]
            })
        },
        task_manager(key) {
            if(key=="task_open"){
                this.select_task_no_name();
            }
            else if(key=="task_close"){
                this.$store.state.task={
                    task_name:"",
                    tifs:[],
                    data_dir:"",
                    sensors:[],
                }
                this.$mitt.aemit("open_close_task",null,this?.$?.uid)
                this.$store.state.open_create=2
            }
        },
        async select_task_no_name(){
            let task_names=await this.$apis.task_get({
                task_dir :this.$store.state.task_dir,
            })
            if(task_names?.length==0){
                this.$message.info("还没有项目")
            }
            else{
                this.task_selects=[]
                this.show_task_drawer_visible=true
                for (let i = 0; i < task_names?.length; i++) {
                    let one_name = task_names[i];
                    this.task_selects.push(
                        {
                            name :one_name,
                            value:one_name
                        }
                    )
                } 
            }
        },
        async select_task_use_name(){
            let task=await this.$apis.task_get({
                task_dir :this.$store.state.task_dir,
                task_name:this.task_select_name,
            })
            if(task){
                this.$store.state.task=task;
                this.$store.state.open_create=1
                this.$mitt.aemit("open_close_task",null,this?.$?.uid)
            }
            else{
                this.$store.state.open_create=2
            }
        },
        show_task_drawer_close(){
            this.show_task_drawer_visible=false
            if(this.task_select_name){
                this.select_task_use_name()
            }
        },
    },
};
</script>
<style >
#nprogress .bar {
  height: 4px !important;
}
</style>